<!--河长完成事件管理页面-->
<style lang="less">
.complete {
  margin: 15px;
  #map {
    width: 100%;
    max-height: 100%;
  }
  .icon-btn {
    font-size: 20px;
    color: #555555;
  }
  .formItem {
    width: 180px;
  }
  .mr30 {
    margin-right: 20px;
  }
  .smallForm {
    display: inline-block;
  }
  .smallArr {
    width: 15%;
    display: inline-block;
  }
}
.btn_position {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 999;
  width: 150px;
}
.btn_position1 {
  position: absolute;
  bottom: 0;
  left: 160px;
  z-index: 999;
  width: 150px;
}
.btn_position2 {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 999;
  width: 150px;
}
</style>

<template>
  <div class="complete">
    <Card :bordered="false">
      <p slot="title"
         class="white">巡查管理 > <span class="select-font">河长巡河记录</span></p>
      <div>
        <Form :model="formItem"
              class="smallForm">
          <Input v-model="formItem.river_name"
                 class="formItem mr30"
                 :maxlength="30"
                 placeholder="请输入河流名称"></Input>
          <Input v-model="formItem.name"
                 class="formItem mr30"
                 :maxlength="30"
                 placeholder="请输入河长姓名"></Input>
          <DatePicker @on-change="change"
                      format="yyyy-MM-dd"
                      type="daterange"
                      placeholder="请选择巡河日期"
                      style="width: 175px"
                      class="formItem mr30"></DatePicker>
          <dep-select @getData="getDepData"
                      class="formItem mr30"></dep-select>
          <area-select @getData="getAreaData"
                       class="formItem mr30"></area-select>
        </Form>
        <Button type="info"
                class="mr30"
                @click="getData('1')">搜索</Button>
        <Button type="warning"
                class="mr30"
                @click="DaoImg">巡河图片导出</Button>
        <Button type="success"
                @click="getData('1',0)">导出数据</Button>
      </div>
    </Card>
    <div class="">
      <Table ref="table"
             :data="logData"
             :columns="logColumns"
             stripe></Table>
      <Page class="pull-right"
            :total="Page.total"
            :current="Page.current"
            :page-size="Page.pageSize"
            size="small"
            show-total
            @on-change="changePage"></Page>
    </div>
    <pictures ref="pictures"></pictures>
    <loading v-show="spinShow"></loading>
  </div>
</template>

<script>
import { loadingMixin, masksMixin } from 'common/js/mixins';
import { ajaxPost } from 'global/axios';
import storage from 'good-storage';
import { domain2 } from 'global/setting';
import picture from 'public/picture';
import depSelect from 'public/depSelect';
import areaSelect from 'public/areaSelect';
import tableDropdown from 'public/tableHeaderDropdown';
export default {
  components: {
    pictures: picture,
    'area-select': areaSelect,
    'dep-select': depSelect,
  },
  mixins: [loadingMixin, masksMixin],
  data() {
    return {
      urlCompleteList: '/bus/event/list',
      urlDaoImg: '/bus/event/makezip',
      logData: [],
      spinShow: false,
      logColumns: [
        {
          title: '河长姓名',
          key: 'chief_name',
        },
        {
          title: '河流名称',
          key: 'river_name',
        },
        {
          title: '所属区',
          key: 'area',
          render: (h, param) => {
            return h('div', {}, param.row.location.area);
          },
        },
        {
          title: '负责镇',
          key: 'town',
          render: (h, param) => {
            return h('div', {}, param.row.location.town);
          },
        },
        {
          title: '负责河长办',
          key: 'dep_name',
          render: (h, param) => {
            return h('div', {}, param.row.location.dep_name);
          },
        },
        {
          title: '等级',
          key: 'level',
          renderHeader: (h, params) => {
            return h(tableDropdown, {
              props: {
                placement: 'bottom-start',
                showArrow: true,
                content: '等级',
                data: [
                  { value: 'all', name: '全部' },
                  { value: '3', name: '市级' },
                  { value: '2', name: '区级' },
                  { value: '1', name: '镇级' },
                  { value: '0', name: '村级' },
                ],
              },
              on: {
                'on-choosed': data => {
                  if (data !== 'all') {
                    this.formItem.user_type = data;
                    this.getData(1, 13);
                  } else {
                    this.formItem.user_type = '';
                    this.getData(1, 13);
                  }
                },
              },
            });
          },
          render: (h, params) => {
            if (params.row.user_type === '3') {
              return h('div', {}, '市级');
            } else if (params.row.user_type === '2') {
              return h('div', {}, '区级');
            } else if (params.row.user_type === '1') {
              return h('div', {}, '镇级');
            } else if (params.row.user_type === '0') {
              return h('div', {}, '村级');
            }
          },
        },
        {
          title: '操作时间',
          key: 'date_time',
          render: (h, params) => {
            return h('div', params.row.date_time.substr(0, 10));
          },
        },
        {
          title: '图片',
          key: 'photos',
          width: 200,
          render: (h, param) => {
            if (param.row.photos.length > 0) {
              let html = [];
              for (let i = 0; i < param.row.photos.length; i++) {
                html.push(
                  h('img', {
                    attrs: {
                      src: domain2 + param.row.photos[i],
                    },
                    style: {
                      width: '50px',
                      height: '50px',
                    },
                    on: {
                      click: () => {
                        this.$refs.pictures.showImg(param.row.photos, i);
                      },
                    },
                  })
                );
              }
              return h('div', html);
            } else {
              return null;
            }
          },
        },
        {
          title: '描述',
          key: 'overview',
          width: 300,
        },
      ],
      formItem: {
        name: '',
        river_name: '',
        report_time: [],
        deps: '',
        areas: {},
        user_type: '',
      },
      Page: {
        current: 1,
        pageSize: 13,
        total: 0,
      },
      actionPage: 1,
    };
  },
  methods: {
    getData(page, pageSize = 13) {
      let params = {
        data: {
          page,
          pageSize,
          searchValue: {},
          order: { date_time: -1 },
        },
        url: this.urlCompleteList,
        token: storage.session.get('token'),
        success: res => {
          this.$Loading.finish();
          this.logData = res.data.result.result;
          this.Page.total = res.data.result.totalSize;
        },
      };
      if (this.formItem.name !== '') {
        params.data.searchValue.chief_name = `${this.formItem.name}|#|like`;
      }
      if (this.formItem.river_name !== '') {
        params.data.searchValue.river_name = `${this.formItem.river_name}|#|like`;
      }
      if (this.formItem.deps !== '') {
        params.data.searchValue[
          'location.dep_name'
        ] = `${this.formItem.deps}|#|like`;
      }
      if (
        this.formItem.areas !== undefined &&
        this.formItem.areas.name !== undefined
      ) {
        if (this.formItem.areas.level == '2') {
          params.data.searchValue['location.area'] = this.formItem.areas.name;
        } else if (this.formItem.areas.level == '3') {
          params.data.searchValue['location.town'] = this.formItem.areas.name;
        }
      }
      if (this.formItem.report_time.length != 0) {
        params.data.searchValue.date_time = `${this.formItem.report_time[0]} 00:00:00|#|${this.formItem.report_time[1]} 23:59:59`;
      }
      if (this.formItem.user_type !== '') {
        params.data.searchValue.user_type = this.formItem.user_type;
      }
      if (pageSize === 0) {
        params.success = res => {
          let data = res.data.result.result;
          data.map(item => {
            item.area = item.location.area;
            item.town = item.location.town;
            item.dep_name = item.location.dep_name;
            if (item.user_type === '3') {
              item.level = '市级';
            } else if (item.user_type === '2') {
              item.level = '区级';
            } else if (item.user_type === '1') {
              item.level = '镇级';
            } else if (item.user_type === '0') {
              item.level = '村级';
            }
          });
          this.$refs.table.exportCsv({
            filename: '巡河完成事件记录',
            columns: this.logColumns.filter((col, index) => index != 7),
            data,
            quoted: true,
          });
        };
      }
      ajaxPost(params);
    },
    changePage(page) {
      this.actionPage = page;
      this.getData(page);
    },
    change(data) {
      if (data[0] === '') {
        this.formItem.report_time = [];
        return;
      }
      this.formItem.report_time = data;
    },
    DaoImg() {
      let params = {
        data: {
          searchValue: {},
        },
        token: storage.session.get('token'),
        url: this.urlDaoImg,
        success: res => {
          let url2 = res.data.result;
          fetch(url2).then(res =>
            res.blob().then(blob => {
              let a = document.createElement('a');
              let url = window.URL.createObjectURL(blob);
              let filename = `${this.formItem.report_time[0]}至${this.formItem.report_time[1]}巡查图片压缩包`;
              a.href = url;
              a.download = filename;
              a.click();
              window.URL.revokeObjectURL(url);
            })
          );
          this.spinShow = false;
        },
      };
      if (this.formItem.report_time.length != 0) {
        params.data.searchValue.date_time = `${this.formItem.report_time[0]} 00:00:00|#|${this.formItem.report_time[1]} 23:59:59`;
      } else {
        this.$Message.warning('请选择巡河日期');
        return;
      }
      if (this.formItem.name !== '') {
        params.data.searchValue.chief_name = `${this.formItem.name}|#|like`;
      }
      if (this.formItem.river_name !== '') {
        params.data.searchValue.river_name = `${this.formItem.river_name}|#|like`;
      }
      if (this.formItem.deps !== '') {
        params.data.searchValue[
          'location.dep_name'
        ] = `${this.formItem.deps}|#|like`;
      }
      if (
        this.formItem.areas !== undefined &&
        this.formItem.areas.name !== undefined
      ) {
        if (this.formItem.areas.level == '2') {
          params.data.searchValue['location.area'] = this.formItem.areas.name;
        } else if (this.formItem.areas.level == '3') {
          params.data.searchValue['location.town'] = this.formItem.areas.name;
        }
      }
      if (this.formItem.user_type !== '') {
        params.data.searchValue.user_type = this.formItem.user_type;
      }
      this.spinShow = true;
      ajaxPost(params);
    },
    getDepData(data) {
      if (data === undefined) {
        this.formItem.deps = '';
      } else {
        this.formItem.deps = data;
      }
    },
    getAreaData(data) {
      this.formItem.areas = data;
    },
  },
  mounted() {
    this.getData('1');
  },
};
</script>
